<template>
  <!--南海小地图-->
  <div class="southChinaSeaMapDiv" :style="props.styles">
    <SouthChinaSeaMap :southSeaMapId="props.southSeaMapId" :zoom="props.zoom"></SouthChinaSeaMap>
  </div>
  <!--南海小地图拉伸图片-->
  <!--<div class="southChinaSeaImgDiv">
    <img src="@/assets/map/image/newImage/southSeaMap.png" style="width:75px;height:150px;">
  </div>-->
</template>

<script setup>
import SouthChinaSeaMap from '@/map/components/southChinaSeaMap/map.vue';
const props = defineProps({
  styles: {
    required: false,
    type: Object,
    default: {},
  },
  zoom: {
    required: false,
    type: Number,
    default: 3,
  },
  southSeaMapId: {
    required: false,
    type: String,
    default: 'southSeaMap',
  },
});
</script>

<style scoped lang="scss">
.southChinaSeaMapDiv {
  position: absolute;
  bottom: 210px;
  right: 55px;
  height: 170px;
  // height: 150px;
  width: 120px;
  border: 2px solid #057bc1;
  background: #07114b;
}
.southChinaSeaImgDiv {
  position: absolute;
  bottom: 210px;
  right: 55px;
}
</style>
